<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>论坛页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/community.css"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <style>
        * {
            box-sizing:border-box;
        }
        body {
            margin:0;
            padding:0;
            font-weight:500;
            font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;
        }
        div.search {
            padding:10px 0;
        }
        form {
            position:relative;
            width:300px;
            margin:0 auto;
        }
        input,button {
            border:none;
            outline:none;
        }
        input {
            width:100%;
            height:42px;
            padding-left:13px;
        }
        button {
            height:42px;
            width:42px;
            cursor:pointer;
            position:absolute;
        }
        .bar7 form {
            height:42px;
        }
        .bar7 input {
            width:250px;
            border-radius:42px;
            border:2px solid #324B4E;
            background:#F9F0DA;
            /*点击搜索框，环保屈伸长度*/
            /*transition:.3s linear;*/
            float:left;
        }
        .bar7 input:focus {
            /*指定搜索框变宽长度*/
            /*width:300px;*/
        }
        .bar7 button {
            background:none;
            top:-2px;
            right:75px;
        }
        .bar7 button:before {
            content:"Search";
            font-family:FontAwesome,serif;
            color:#324b4e;
        }
    </style>
</head>

<body>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12">
<!--        搜索框-->
        <div class="search bar7">
            <form action="" method="post">
                <input type="text" placeholder="搜索点什么..." name="search" style="background-color: whitesmoke">
                <span style="float: right">
                    <a th:href="@{/publish}"><img src="/icos/发布.png" style="width: 40px"></a>
                </span>
                <button type="submit"></button>
            </form>
        </div>
        <div class="alert alert-danger alert-dismissible" role="alert"  th:if="${errorMsg!=null}">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Warning!</strong><span th:text="${errorMsg}"></span>
        </div>
<!--        导航栏-->
        <ol class="breadcrumb" style="margin: 0 10px">
            <li class="active"><a th:href="@{#}">最热</a></li>
            <li><a th:href="@{#}">最新</a></li>
            <li><a th:href="@{#}">精品</a></li>
        </ol>
<!--        问题列表-->
        <div class="panel panel-default" style="margin: 20px 10px">
            <div class="panel-body" th:each="question:${questionList}">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="img-rounded" src="/img/touxiang.jpg" alt="..." style="height: 40px">
                        </a>
                    </div>
                    <div class="media-body">
                        <span style="float: right" class="text-desc" th:text="${question.qAuthor}"></span>
                        <h5 class="media-heading"><a th:href="@{'/question/'+${question.qId}}" th:text="${question.qTitle}">标题</a></h5>
                        <span th:text="${question.qCreate}" class="text-desc" style="float: right"></span>
                        <span style="font-size: 12px" th:text="${question.qDesc}"></span>
                    </div>
                </div>
            </div>
<!--            列表分页-->
            <div  class="col-xs-12 col-sm-12 col-md-12">
                <nav aria-label="Page navigation" style="margin-left: 10px;margin-bottom: 50px;margin-right: 10px;">
                    <ul class="pagination">
                        <li>
                            <a th:href="@{/forumPage/(pageIndex=1)}" aria-label="首页">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/forumPage/(pageIndex=${curPage-1})}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a th:href="@{/forumPage/(pageIndex=${curPage-2})}" th:text="${curPage}-2" th:if="${prePage!=null}"></a></li>
                        <li><a th:href="@{/forumPage/(pageIndex=${curPage-1})}" th:text="${curPage}-1" th:if="${prePage!=null}"></a></li>
                        <li><a th:href="@{/forumPage/(pageIndex=${curPage})}" th:text="${curPage}"></a></li>
                        <li><a th:href="@{/forumPage/(pageIndex=${curPage+1})}" th:text="${curPage}+1" th:if="${nextPage!=null}"></a></li>
                        <li><a th:href="@{/forumPage/(pageIndex=${curPage+2})}" th:text="${curPage}+2" th:if="${nextPage!=null}"></a></li>
                        <li>
                            <a th:href="@{/forumPage/(pageIndex=${curPage+1})}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li>
                            <a th:href="@{/forumPage/(pageIndex=${lastPage})}" aria-label="最后一页" th:if="${lastPage!=null}">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<div th:insert="nav::base"></div>
</body>
</html>